{% extends 'PHPDishWebBundle::layout.html.twig' %}

{% block title %}{{ user.username }}{% endblock %}

{% block script %}
<script type="text/javascript" src="{{ asset('build/js/user.js') }}"></script>
{% endblock %}

{% set isMe = app.user is same as (user) %}

{% block content %}
    <div class="container">
    <div class="row">
        <article class="col-md-9">
            <div class="panel panel-u user-dash">
                <div class="panel-heading">
                    <div class="clearfix user-details" data-username="{{ user.username }}">
                        <div class="media">
                            <div class="media-left avatar">
                                <img src="{{ asset(user.avatar)|imagine_filter('middle_square') }}" class="img-responsive"/>
                            </div>
                            <div class="media-body summary">
                                <h1 class="username">{{ user.username }}</h1>
                                <p class="description">{{ user.description|default('user.what_to_say'|trans) }}</p>
                                <p class="small profile meta">
                                    <span class="register-at"><i class="if i-calendar"></i> {{ 'user.register_at'|trans({'%timeago%': user.createdAt|time_diff}) }}</span>
                                    {% if user.profile %}
                                        {% if user.profile.url %}
                                            <span><i class="if i-link"></i> <a href="{{ user.profile.url }}" target="_blank">{{ user.profile.url }}</a></span>
                                        {% endif %}
                                        {% if user.profile.company %}
                                            <span><i class="if i-users"></i> {{ user.profile.company }}</span>
                                        {% endif %}
                                        {% if user.profile.location %}
                                            <span><i class="if i-map"></i> {{ user.profile.location }}</span>
                                        {% endif %}
                                    {% endif %}
                                </p>
                            </div>
                            <div class="media-right actions">
                                {% if isMe %}
                                    <a href="{{ path('setting_profile') }}" class="btn btn-block u-btn-outline-primary">
                                        <i class="fa fa-pencil"></i> {{ 'user.edit_my_profile'|trans }}
                                    </a>
                                {% else %}
                                    <a href="{{ path('chat_add', {'mail_to': user.username}) }}" class="btn btn-sm u-btn-outline-primary send-message">
                                        <i class="if i-envelope-o"></i> {{ 'user.send_message'|trans }}
                                    </a>
                                    <div data-role="follow" class="follow">
                                        {% if app.user and user.isFollowedBy(app.user) %}
                                            <button type="button" class="btn btn-sm btn-default" data-action="unfollow">
                                                <i class="if i-check"></i> {{ 'ui.have_follow'|trans }}
                                            </button>
                                        {%else %}
                                            <button type="button" class="btn btn-sm u-btn-primary" data-action="follow">
                                                <i class="if i-plus"></i> {{ user.isWomen ? 'user.follow_she'|trans : 'user.follow_him'|trans}}
                                            </button>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="list-unstyled list-inline tab-nav" data-pjax-container="list-container">
                    <li {% if tab == 'topic' %}class="active"{% endif %}>
                        <a href="{{ path('user_topics', {'username': user.username}) }}"><i class="fa fa-comments-o"></i> {{ 'ui.topic'|trans }}</a>
                    </li>
                    <li {% if tab == 'post' %}class="active"{% endif %}>
                        <a href="{{ path('user_posts', {'username': user.username}) }}"><i class="fa fa-file-text-o"></i> {{ 'ui.category'|trans }}</a>
                    </li>
                    <li {% if tab == 'book' %}class="active"{% endif %}>
                        <a href="{{ path('user_books', {'username': user.username}) }}"><i class="fa fa-book"></i> {{ 'ui.book'|trans }}</a>
                    </li>
                    <li {% if tab == 'reply' %}class="active"{% endif %}>
                        <a href="{{ path('user_replies', {'username': user.username}) }}"><i class="fa fa-commenting-o"></i> {{ 'ui.reply'|trans }}</a>
                    </li>
                    <li {% if tab == 'following' %}class="active"{% endif %}>
                        <a href="{{ path('user_following', {'username': user.username}) }}"><i class="if i-following"></i> {{ 'ui.following'|trans }}</a>
                    </li>
                    <li {% if tab == 'follower' %}class="active"{% endif %}>
                        <a href="{{ path('user_followers', {'username': user.username}) }}"><i class="if i-follower"></i> {{ 'ui.follower'|trans }}</a>
                    </li>
                </ul>
                <div class="entry-meta hidden">
                    {% block entry_meta %}
                        <span>{{ 'ui.no_content_yet'|trans }}</span>
                    {% endblock %}
                </div>
                <div id="list-container">
                    {% block user_content %}
                        <div class="empty-data">
                            {{ 'ui.no_record'|trans }}
                        </div>
                    {% endblock %}
                </div>
            </div>
        </article>
        <div class="col-md-3">
            <div class="panel panel-widget">
                <div class="panel-heading">{{ user.isWomen ? 'user.her_categories'|trans : 'user.his_categories'|trans }}</div>
                <div class="panel-body">{{ render(controller('PHPDishPostBundle:Category:userCategories', {'user': user})) }}</div>
            </div>
            <div class="panel panel-widget">
                <div class="panel-body user-counter">
                    <div class="row">
                        <div class="col-md-4 cell">
                            <h6 class="title">{{ 'ui.follower'|trans }}</h6>
                            <p class="number"><a href="{{ path('user_followers', {'username': user.username}) }}">{{ user.followerCount }}</a></p>
                        </div>
                        <div class="col-md-4 cell">
                            <h6 class="title">{{ 'ui.following'|trans }}</h6>
                            <p class="number"><a href="{{ path('user_following', {'username': user.username}) }}">{{ user.followingCount }}</a></p>
                        </div>
                        <div class="col-md-4 cell">
                            <h6 class="title">{{ 'ui.article'|trans }}</h6>
                            <p class="number"><a href="{{ path('user_posts', {'username': user.username}) }}">{{ user.postCount }}</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}